﻿@page "/buttons"
@inject IStringLocalizer<Buttons> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Primary">@Localizer["Button1Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Secondary">@Localizer["Button2Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Success">@Localizer["Button3Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Danger">@Localizer["Button4Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Warning">@Localizer["Button5Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Info">@Localizer["Button6Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Dark">@Localizer["Button7Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Light">@Localizer["Button8Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Link">@Localizer["Button9Text"]</Button></div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Round">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">@Localizer["Button1Text"]</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">@Localizer["Button2Text"]</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">@Localizer["Button3Text"]</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">@Localizer["Button4Text"]</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">@Localizer["Button5Text"]</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
            </Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]' Name="Outline">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">@Localizer["Button1Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">@Localizer["Button2Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">@Localizer["Button3Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">@Localizer["Button4Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">@Localizer["Button5Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">@Localizer["Button6Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">@Localizer["Button7Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">@Localizer["Button8Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">@Localizer["Button9Text"]</Button></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]' Name="Size">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">@Localizer["Button10Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">@Localizer["Button11Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">@Localizer["Button12Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">@Localizer["Button13Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">@Localizer["Button14Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">@Localizer["Button15Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraExtraLarge" Color="Color.Warning">@Localizer["ButtonExtraExtraLargeText"]</Button></div>
        <div class="col-12"><Button IsBlock="true" Color="Color.Primary">@Localizer["Button16Text"]</Button></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="IsDisabled">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">@Localizer["Button1Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">@Localizer["Button2Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">@Localizer["Button3Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">@Localizer["Button4Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">@Localizer["Button5Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">@Localizer["Button6Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">@Localizer["Button7Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">@Localizer["Button8Text"]</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">@Localizer["Button9Text"]</Button></div>
    </div>

    <p class="mt-3">@((MarkupString)Localizer["P1"].Value)</p>
    <p>@((MarkupString)Localizer["P2"].Value)</p>

    <p><b>@Localizer["b1"]</b></p>
    <ul class="ul-demo mb-3">
        <li>@((MarkupString)Localizer["Li1"].Value)</li>
        <li>@((MarkupString)Localizer["Li2"].Value)</li>
    </ul>
    <div class="row g-3">
        <div class="col-12">
            <Button Text="@Localizer["Button17Text"]" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
                <Tooltip Title="@Localizer["TooltiTitle"]" Placement="Placement.Top" Trigger="hover" />
            </Button>
            <Button Color="Color.Info" Text="@Localizer["Button23Text"]" OnClickWithoutRender="@ClickButton2" class="ms-3"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Color">
    <div class="btn-group" role="group">
        <Button Color="Color.Primary">@Localizer["Button18Tetx"]</Button>
        <Button Color="Color.Success">@Localizer["Button19Text"]</Button>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Icon">
    <div class="row g-3">
        <div class="col-auto">
            <Button Color="Color.Primary" Icon="fa fa-fa" Text="@Localizer["Button20Text"]"></Button>
        </div>
        <div class="col-auto">
            <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="@Localizer["Button21Text"]"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="Extension">
    <div class="row g-3">
        <div class="col-auto">
            <WinButton Text="@Localizer["Button18Tetx"]" OnClick="@ClickButtonShowText"></WinButton>
        </div>
        <div class="col-auto">
            <WinButton Text="@Localizer["Button19Text"]" OnClick="@ClickButtonShowText"></WinButton>
        </div>
        <div class="col-auto" style="padding: 7px 0;">
            @ButtonText
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="Async">
    <p>@((MarkupString)Localizer["P3"].Value)</p>
    <Button Text="@Localizer["Button22Text"]" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

<MethodTable Items="@GetMethods()" />
